<template>
    <div id='wrap'>
        <input type="text" v-model="text">
        <button @click="uptext">点击更改</button>

        <input type="text" v-model="text1">
        <p>{{ text1 }}</p>

        <input type="text" v-model="text2">
        <p>{{ text2 }}</p>
        <!-- <button @click="uptext">点击更改</button> -->
    </div>
</template>
<script lang='ts'>
export default {
    name: '防抖函数',
}
</script>
<script lang='ts' setup>
import { useDebouncedRef, useUpperCaseRef, unseDelayedRef } from '../../utils/Utils.ts'
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';

//调用防抖函数工具
const text = useDebouncedRef('你好世界', 500)
const uptext = () => {
    text.value = '美丽世界'
}

//调用格式化输入值转大写
const text1 = useUpperCaseRef('')


//延迟一定时间更新值，用于节约性能消耗
const text2 = unseDelayedRef('', 2000);
</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>
